<template>
  <div class="flex flex-1 flex-col justify-center px-6 py-5 lg:px-8">
    <div class="sm:mx-auto sm:w-full sm:max-w-sm flex flex-col justify-center items-center">
      <img src="../assets/logo.png" class="w-32">
      <h2 class="text-center text-2xl font-bold leading-9 tracking-tight">找回密码</h2>
    </div>
    <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
      <div>
        <label for="email" class="block text-sm font-medium leading-6 text-left">邮箱</label>
        <div class="mt-2">
          <input id="email" name="email" type="email" autocomplete="email" required=""
                 v-model="user.email"
                 @change="checkEmail()"
                 class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
        </div>

        <div class="flex items-center justify-between mt-5">
          <label for="password" class="block text-sm font-medium leading-6">验证码</label>
        </div>
        <div class="mt-2 flex flex-row gap-2">
          <input v-model="user.password" id="password" name="password" type="text"
                 autocomplete="current-password"
                 maxlength="4"
                 class="block  rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"/>
          <div  @click="getCode" :class="[{'select-none btn-ghost':config.verificationCodeBtnSecond > 0},' btn btn-secondary rounded-2xl']">{{ config.verificationCodeBtnSecond > 0 ? config.verificationCodeBtnSecond : '获取验证码' }}</div>
        </div>
        <button type="submit"
                @click="toEditPasswordPage"
                class="btn btn-primary w-full rounded-2xl mt-5">
          下一步
        </button>
        <button @click="router.push('/login')"
                type="submit"
                class="btn btn-ghost w-full rounded-2xl mt-5">
          登录
        </button>
        <div class="text-sm w-full relative">
          <router-link to="/register"
                       href="#"
                       class="absolute right-0 text-right w-auto  hover:text-accent link">
            立即注册一个账户
          </router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref} from "vue";
import router from "../plugins/router.ts";
import {hook_checkEmail, hook_forgetPasswordCreateCodeByEmail} from "../hook/UserHook.ts";
import {useAuthStore} from "../plugins/pinia.ts";
import {useToast} from "vue-toastification";

let user = reactive({
  email: null,
  password: null,
})
let verificationCodeInterval = null
let config = ref({
  verificationCodeBtnSecond: 0,
  checkEmail: false,
})

async function getCode() {
  if(/.+@.+\..+/.test(user.email) == false){
    useToast().error("请正确输入")
    return
  }
  if(config.value.verificationCodeBtnSecond > 0){
    useToast().error("无法重复获取验证码")
  }else{
    if(config.value.checkEmail == false){
      useToast().error("用户不存在")
    }else{
      let promise = await hook_forgetPasswordCreateCodeByEmail(user.email);
      let flag = <boolean>promise?.['flag'];
      if (flag) {
        useToast().success("已发送验证码")
        config.value.verificationCodeBtnSecond = 60;
        verificationCodeInterval = setInterval(() => {
          config.value.verificationCodeBtnSecond -= 1;
          if (config.value.verificationCodeBtnSecond <= 0) {
            clearInterval(verificationCodeInterval)
            verificationCodeInterval = null
          }
        }, 1000);
      }
    }
  }
}

async function checkEmail() {
  console.log(user.email)
  let promise = await hook_checkEmail(user.email);
  config.value.checkEmail = !promise?.['flag'];
}

function toEditPasswordPage() {
  useAuthStore().isEditPassword = true;
  useAuthStore().editEmail = user.email
  router.push("/forgetEditPassword")
}



</script>

<style scoped>


</style>
